<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>链接的提示效果</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<style type="text/css">
    #tooltip {
        border: 1px solid #CCCCCC;
        position: absolute;
        background: #ABD9F5;
        border-radius: 2px;
        padding: 5px;
        color: red;
    }
</style>
<script type="text/javascript">
$(function() {
    $('a').mouseover(function(e) {
        var x = 10;
        var y = 20;
        this.Title = this.title;
        //清空默认的title
        this.title = '';

        //创建div元素并添加
        var div = '<div id="tooltip">'+this.Title+'</div>';
        $('body').append(div);

        //设置div的位置
        $('#tooltip').css({
            'top' : (e.pageY+y) + 'px',
            'left' : (e.pageX+x) + 'px'
        }).show('fast');
    }).mouseout(function() {
        $('#tooltip').remove();
        this.title = this.Title;
    }).mousemove(function(e) {
        $('#tooltip').css({
            'top' : (e.pageY+15) + 'px',
            'left' : (e.pageX+15) + 'px'
        });
    })
});
</script>
</head>
<body>
<div>
    <a href="javascript void(0)" title="链接1">链接1</a>
    <a href="javascript void(0)" title="链接2">链接2</a>
    <a href="javascript void(0)" title="链接3">链接3</a>
</div>
</body>
</html>
